<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="课程名称">
        <el-input v-model="classActivity.className" clearable placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select v-model="classActivity.classifyGoodsId" placeholder="课程分类" clearable>
          <el-option :label=item.classifyName :value=item.id v-for="(item,index) in categoryList" :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程老师">
        <el-input v-model="classActivity.teacherName" clearable placeholder="课程老师"></el-input>
      </el-form-item>
      <el-form-item label="上课时间">
        <el-select v-model="classActivity.week" placeholder="上课时间" clearable>
          <el-option :label=item.label :value=item.value v-for="(item,index) in options" :key="index"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加课程</el-button>
      </el-form-item>
    </el-form>
    <el-table class="el-table"
              border
              :data="classActivityList.list"
              style="width: 98%;"
    >
      <el-table-column
        align="center"
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column width="80" type="expand">
        <template slot-scope="scope">
          <div class="box">
            <div style="width: 40%">
              <div style="text-align: center;font-weight: bold;font-size: 16px">
                <span>课程表</span>
<!--                <span @click="handleSchedule(scope.row.id)" style="float: right;margin-right: 10px;font-size: 18px"><i-->
<!--                  class="el-icon-plus"-->
<!--                ></i></span>-->
                <el-button style="float: right;margin-right: 10px;margin-top: -10px" @click="handleSchedule(scope.row.id)"
                           type="text" >增加课程时间</el-button>
              </div>
              <el-table
                :data="scope.row.attendTimes"
                border
              >

                <el-table-column
                  align="center"
                  prop="week"
                  label="日期"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-tag class="time_tag" type="success" size="medium" v-if="scope.row.week===1">星期一</el-tag>
                    <el-tag class="time_tag" size="medium" type="info" v-if="scope.row.week===2">星期二</el-tag>
                    <el-tag class="time_tag" size="medium" type="warning" v-if="scope.row.week===3">星期三</el-tag>
                    <el-tag class="time_tag" size="medium"  type="danger" v-if="scope.row.week===4">星期四</el-tag>
                    <el-tag class="time_tag" size="medium" v-if="scope.row.week===5">星期五</el-tag>
                    <el-tag class="time_tag" size="medium" v-if="scope.row.week===6">星期六</el-tag>
                    <el-tag class="time_tag" size="medium" v-if="scope.row.week===7">星期天</el-tag>
                  </template>

                </el-table-column>

                <el-table-column
                  align="center"
                  prop="attendTime"
                  label="时间"
                  width="280"

                >
                  <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.attendTime" :key="index">
                      <el-tag class="time_tag" size="medium">开始：{{ item.start_time }}</el-tag>
                      <el-tag class="time_tag" size="medium" type="danger">结束：{{ item.end_time }}</el-tag>
                    </div>

                  </template>

                </el-table-column>
                <el-table-column
                  align="center"
                  prop="attendTime"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button plain size="mini" @click="handleUpdSchedule(scope.row)">修改</el-button>

                    <el-popconfirm
                      class="ml-1"
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定删除此课程时间吗？"
                      @onConfirm="delScheduleTime(scope.row)"
                    >
                      <el-button
                        type="danger"
                        size="mini"
                        slot="reference"
                      >删除
                      </el-button>
                    </el-popconfirm>


                  </template>

                </el-table-column>
              </el-table>
            </div>
            <div style="width: 30%;" class="ml-1">
              <div style="text-align: center;font-weight: bold;font-size: 16px">
                <span>任职详情</span>
                <el-button style="float: right;margin-right: 10px;margin-top: -10px"  @click="handleEmployee(scope.row.id)"
                           type="text" >人员管理</el-button>

                <!--                <span style="float: right;margin-right: 10px;font-size: 18px"><i class="el-icon-s-custom"></i></span>-->
                <!--                <el-button style="float: right;margin-bottom: 20px" size="small">人员管理</el-button>-->
              </div>

              <el-table
                :data="scope.row.teacherNames"
                border
              >
                <el-table-column
                  align="center"
                  prop="role"
                  label="职位"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-tag class="time_tag" size="medium" v-if="scope.row.role===1">主讲师</el-tag>
                    <el-tag class="time_tag" size="medium" v-if="scope.row.role===2">助教</el-tag>

                  </template>

                </el-table-column>

                <el-table-column
                  align="center"
                  prop="attendTime"
                  label="姓名"
                >
                  <template slot-scope="scope">
                    {{ scope.row.teacher }}


                  </template>

                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="课程图片"
        width="150"
      >
        <template slot-scope="scope">
          <img style="width: 80px;max-height:80px;border-radius: 3px" :src="scope.row.image" alt="">
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="className"
        label="课程名称"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="teacherName"
        label="任职教师"
        width="200"
      >
        <template slot-scope="scope">
          <el-tag class="teacher-tag" v-for="(item,index) in scope.row.teacherNames" :key="index"
                  :type="item.role===1?'danger':'info'"
          >{{ item.teacher }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="price"
        label="课程售价"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="inventory"
        label="剩余名额"
        width="100"
      >

      </el-table-column>
      <el-table-column
        align="center"
        prop="number"
        label="报名人数"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="number"
        label="报名率"
        width="130"
      >
        <template slot-scope="scope">
          <el-progress type="circle" :width="50"
                       :percentage="parseInt(scope.row.number/(scope.row.number+scope.row.inventory)*100)"
          >
          </el-progress>
          <!--          {{scope.row.number}}/{{scope.row.number+scope.row.inventory}}-->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="classifyName"
        label="所属院系"
        width="150"
      >


      </el-table-column>
      <el-table-column
        align="center"
        prop="classAddress"
        label="授课地点"
      >
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            size="mini"
            @click="handleUpdate(scope.row.id)"
          >修改
          </el-button>


          <el-popconfirm
            class="ml-1"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除此课程吗？"
            @onConfirm="delSchedule(scope.row.id)"
          >
            <el-button
              type="danger"
              size="mini"
              slot="reference"
            >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加课程弹窗-->
    <el-dialog lock-scroll :title="title" width="50%" top="5vh" :visible.sync="dialogFormVisible">
      <div class="schedule-form">
        <el-form label-position="right" label-width="110px" :model="classActivityInfo">
          <div>
            <el-form-item label="课程首图">
              <el-upload
                class="avatar-uploader"
                action="https://app.xiangban365.com/app_mobile/upload/file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img style="height: 110px;width: 110px;" v-if="classActivityInfo.image" :src="classActivityInfo.image"
                     class="avatar" alt=""
                >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="课程名称">
              <el-input v-model="classActivityInfo.className" placeholder="课程名称"></el-input>
            </el-form-item>
            <el-form-item label="课程分类">
              <el-select v-model="classActivityInfo.classifyGoodsId" placeholder="课程分类" clearable>
                <el-option :label=item.classifyName :value=item.id v-for="(item,index) in categoryList" :key="index"
                ></el-option>
              </el-select>
            </el-form-item>

          </div>
          <el-form-item label="课程简介">
            <el-input
              class="textarea"
              type="textarea"
              :rows="4"
              placeholder="课程简介"
              v-model="classActivityInfo.label"
            >
            </el-input>

          </el-form-item>
          <div class="box">

            <el-form-item label="是否售卖">
              <el-switch v-model="flag1"></el-switch>
            </el-form-item>
            <el-form-item class="ml-4" label-width="140px" label="是否存在上级课程">
              <el-switch v-model="flag2"></el-switch>
            </el-form-item>

          </div>
          <div class="box">
            <transition name="el-zoom-in-top">
              <el-form-item v-if="flag1" label="课程售价">
                <el-input v-model="classActivityInfo.price" placeholder="课程售价"></el-input>
              </el-form-item>
            </transition>
            <transition name="el-zoom-in-top">
              <el-form-item v-if="flag2" label="上级课程">
                <el-select v-model="classActivityInfo.classPid" placeholder="课程分类" clearable>
                  <el-option :label=item.className :value=item.id v-for="(item,index) in classActivityListPid"
                             :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </transition>
          </div>


          <el-form-item label="课程时间">

            <el-date-picker value-format="yyyy-MM-dd"
                            v-model="scheduleTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
            >
            </el-date-picker>
            <!--            <el-col :span="5">-->
            <!--              <el-date-picker type="date" placeholder="课程开始时间" v-model="classActivityInfo.startTime"-->
            <!--                              style="width: 100%;"-->
            <!--              ></el-date-picker>-->
            <!--            </el-col>-->
            <!--            <el-col class="line" :span="1">-</el-col>-->
            <!--            <el-col :span="5">-->
            <!--              <el-date-picker type="date" placeholder="课程结束时间" v-model="classActivityInfo.endTime" style="width: 100%;"-->
            <!--              ></el-date-picker>-->
            <!--            </el-col>-->
          </el-form-item>
          <div class="box">


            <el-form-item label="打卡范围">
              <el-input type="number" v-model="classActivityInfo.scope" placeholder="打卡范围"></el-input>
            </el-form-item>

            <el-form-item label="招收人数">
              <el-input-number v-model="classActivityInfo.inventory" :min="1" :max="999" label="描述文字"></el-input-number>
              <!--              <el-input   placeholder="招收人数"></el-input>-->
            </el-form-item>
          </div>

          <el-form-item
            label="授课地址"
          >
            <!--            <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>-->
            <amps @childFn="parentFn" ref="child" :movies="movies"></amps>

          </el-form-item>


        </el-form>

      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subClassActivity">确 定</el-button>
      </div>
    </el-dialog>
    <!--人员管理-->
    <el-dialog width="40%" title="人员管理" :visible.sync="dialogTableVisible">
      <div class="schedule-form">
        <div>
          <el-table
            :data="employeeList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          >
            <el-table-column align="center" property="name" label="姓名" width="200">


            </el-table-column>
            <el-table-column align="center" property="role" label="职位">

              <template slot-scope="scope">
                <el-select @change="change(scope.row)" v-model="scope.row.role" placeholder="职位" clearable>
                  <el-option :label=item.label :value=item.role v-for="(item,index) in permission" :key="index"
                  ></el-option>
                </el-select>
              </template>

            </el-table-column>

            <el-table-column width="200">

              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"

                  placeholder="输入关键字搜索"
                />
              </template>

            </el-table-column>

          </el-table>
        </div>
        <div style="float: right;margin-bottom: -10px" slot="footer" class="dialog-footer mt-3">
          <el-button @click="dialogTableVisible = false">关闭</el-button>
        </div>

      </div>


    </el-dialog>
    <!--    添加课程时间-->
    <el-dialog
      :title="title"
      :visible.sync="dialogScheduleVisible"
      width="42%"
    >
      <div class="box">
        <div>
          <el-select v-model="timeClass.week" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>

          </el-select>
        </div>
        <div class="ml-2">
          <div v-for="(item,index) in timeClass.attendTimes" :key="index">

            <el-time-picker
              class="mb-2"
              is-range
              value-format="HH:mm"
              v-model="item.model"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
            <el-button class="ml-2" type="danger" v-if="index!==0" @click="spliceTime(index)">删除</el-button>
            <el-button class="ml-2" v-if="index+1===timeClass.attendTimes.length" @click="addTime">增加</el-button>
          </div>
        </div>


      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogScheduleVisible = false">取 消</el-button>
    <el-button type="primary" @click="subSchedule()">确 定</el-button>
  </span>
    </el-dialog>

    <!--    分页-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
      :current-page="classActivityList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size=pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total="classActivityList.total"
    >
    </el-pagination>
  </div>

</template>

<script>
import { getCategory } from '@/api/category'
import {
  updateClassActivity,
  getClassActivityList,
  addClassActivity,
  getClassActivityInfo,
  bindTeacher,
  deleteClassActivity, addClassActivityTime, updateClassActivityTime, delClassActivityTime, classActivityTimeInfo
} from '@/api/schedule'
import { TeacherList } from '@/api/teacher'
import amps from '@/components/Map/amps'

export default {
  data() {
    return {
      options: [{
        value: 1,
        label: '星期一'
      }, {
        value: 2,
        label: '星期二'
      }, {
        value: 3,
        label: '星期三'
      }, {
        value: 4,
        label: '星期四'
      }, {
        value: 5,
        label: '星期五'
      }, {
        value: 6,
        label: '星期六'
      }, {
        value: 7,
        label: '星期天'
      }],
      classActivityList: [],
      classActivity: {},
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      dialogTableVisible: false,
      dialogScheduleVisible: false,
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      classActivityInfo: {
        image: '',
        inventory: '1'
      },
      categoryList: [],
      imageUrl: '',
      center: [121.59996, 31.197646],
      flag1: true,  //是否售卖
      flag2: false, // 是否存在上级课程
      scheduleTime: [],
      title: '', //弹窗标题
      type: '',  //弹框类型 1添加 2 修改
      movies: {},
      classActivityListPid: '', //上级课程列表
      drawer: false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      permission: [
        {
          role: 1,
          label: '老师'
        },
        {
          role: 2,
          label: '助教'
        }
      ],
      role: '',
      search: '',
      employeeList: [],
      scheduleId: '',//根据点击人员管理变化
      timeClass: {
        sourceWeek:'',
        week: '',
        classOrActivityId: '',
        attendTimes: [
          {
            model: '',
            start_time: '',
            end_time: ''
          }
        ]
      }, //上课时间
      week:''

    }
  },
  components: { amps },
  created() {
    this.getCategoryList()
    this.getClassActivityList()

  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getClassActivityList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getClassActivityList()
      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.getClassActivityList()
    },
    handleNextClick() {
      this.pageNum++
      this.getClassActivityList()
    },
    handleSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.getClassActivityList()
    },
    //课程删除
    delScheduleTime(data){
      let parameter = {
        week:data.week,
        classOrActivityId:data.classOrActivityId
      }
      delClassActivityTime(parameter).then(res =>{

        if (res.success){
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getClassActivityList()


        }

      })

    },
    //课程表时间修改
    handleUpdSchedule(data){
      debugger
      this.type=2
      this.title = "修改课程时间"
      this.scheduleId = data.classOrActivityId
      this.week = data.week //记录原始时间
      let parameter = {
        week:data.week,
        classOrActivityId:data.classOrActivityId
      }
      let _this = this
      classActivityTimeInfo(parameter).then(res =>{
        debugger
        _this.timeClass.week = res.dataMap.week
        _this.timeClass.classOrActivityId = res.dataMap.classOrActivityId
        _this.timeClass.attendTimes = res.dataMap.attendTimes
        console.log(res.dataMap.attendTimes)

      })


      // this.timeClass.week = data.week
      // this.timeClass.classOrActivityId = data.classOrActivityId
      // this.timeClass.attendTimes = data.attendTime

      this.dialogScheduleVisible = true


    },
    //课程表时间添加
    handleSchedule(id) {
      //弹窗类型
      this.type = 1
      this.title = "添加课程时间"
      this.scheduleId = id
      this.timeClass= {
          week: '',
          classOrActivityId: '',
          attendTimes: [
          {
            model: '',
            start_time: '',
            end_time: ''
          }
        ]
      }
      this.dialogScheduleVisible = true
    },
    //课程时间
    subSchedule() {
      this.$message.closeAll()
      if (this.timeClass.attendTimes.length === 1 && (this.timeClass.attendTimes[0].model === '' ||this.timeClass.attendTimes[0].model === null)) {
        this.$message.error('请添加一组上课时间')
        return
      }
      let flag = 0
      for (let i = 0; i < this.timeClass.attendTimes.length; i++) {
        if (this.timeClass.attendTimes[i].model !== '' &&this.timeClass.attendTimes[i].model!==null) {
          this.timeClass.attendTimes[i].start_time = this.timeClass.attendTimes[i].model[0]
          this.timeClass.attendTimes[i].end_time = this.timeClass.attendTimes[i].model[1]
          // this.$delete(this.timeClass.attendTimes[i],'model')
        } else {
          this.timeClass.attendTimes.splice(i, 1)
          if (i !== 0) {
            i = i - 1
          }else {
            flag=1
            // return
          }
        }

      }
      this.timeClass.classOrActivityId=this.scheduleId
      if (flag===1){
        this.$message.error('请添加一组上课时间')
      }else {
        if (this.type===1){
          //添加
          addClassActivityTime(this.timeClass).then(res=>{
            if (res.success){
              this.$message.success('添加成功')
              this.dialogScheduleVisible = false
              this.getClassActivityList()
            }
          })
        }
        if (this.type===2){
          //修改
          this.timeClass.sourceWeek = this.week
          updateClassActivityTime(this.timeClass).then(res=>{
            if (res.success){
              this.$message.success('修改成功')
              this.dialogScheduleVisible = false
              this.getClassActivityList()
            }
          })
        }
      }


    },
    //减少时间
    spliceTime(index) {
      this.timeClass.attendTimes.splice(index, 1)

    },
    //增加时间
    addTime() {
      this.timeClass.attendTimes.push({
        model: '',
        start_time: '',
        end_time: ''
      })
      this.dialogScheduleVisible = true

    },

    //删除课程
    delSchedule(id) {
      let parameter = {
        id: [id]
      }
      deleteClassActivity(parameter).then(res => {
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getClassActivityList()
        }

      })

    },
    //选择框改变事件
    change(scope) {
      debugger
      let parameter = {
        teacherId: scope.id,
        role: scope.role,
        scheduleId: this.scheduleId
      }
      bindTeacher(parameter).then(res => {
        this.$message.closeAll()
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getClassActivityList()
        }

      })

    },
    getClassActivityInfo(id) {
      let parameter = {
        id: id
      }
      //获取课程详情
      getClassActivityInfo(parameter).then(res => {
        this.classActivityInfo = res.dataMap
        this.movies.address = this.classActivityInfo.classAddress
        this.movies.lng = this.classActivityInfo.longitude
        this.movies.lat = this.classActivityInfo.latitude
        this.$refs.child.init()
        if (this.classActivityInfo.isSell === 0) {
          this.flag1 = true
        } else {
          this.flag1 = false
        }
        if (this.classActivityInfo.isParent === 0) {
          this.flag2 = false
        } else {
          this.flag2 = true
        }
        this.scheduleTime = [this.classActivityInfo.startTime, this.classActivityInfo.endTime]
      })

    },

    //子组件传值
    parentFn(payload) {
      this.classActivityInfo.latitude = payload.lat
      this.classActivityInfo.longitude = payload.lng
      this.classActivityInfo.classAddress = payload.address
    },
    //人员管理弹窗
    handleEmployee(scheduleId) {
      this.dialogTableVisible = true
      this.scheduleId = scheduleId
      let parameter = {
        scheduleId: scheduleId
      }
      TeacherList(parameter, 1, 999).then(res => {
        this.employeeList = res.dataMap.list

      })
    },
    //课程修改
    handleUpdate(id) {
      this.dialogFormVisible = true
      this.title = '修改课程'
      this.type = 2
      this.getClassActivityInfo(id)

    },
    //课程添加弹窗
    handleAdd() {
      this.classActivityInfo = {
        image: '',
        inventory: '1'
      }
      this.scheduleTime = [] //清空上课时间
      this.flag2=false //复原是否存在上级
      this.dialogFormVisible = true
      this.title = '添加课程'
      this.type = 1
      this.movies.address = ''
      this.movies.lng = ''
      this.movies.lat = ''
      this.$refs.child.init()

    },
    //课程添加提交
    subClassActivity() {
      this.classActivityInfo.startTime = this.scheduleTime[0]
      this.classActivityInfo.endTime = this.scheduleTime[1]
      if (this.flag1) {
        this.classActivityInfo.isSell = 0
      } else {
        this.classActivityInfo.isSell = 1
        this.classActivityInfo.price = ''

      }
      if (this.flag2) {
        this.classActivityInfo.isParent = 1
      } else {
        this.classActivityInfo.isParent = 0
        this.classActivityInfo.classPid = ''

      }
      //添加
      if (this.type === 1) {

        addClassActivity(this.classActivityInfo).then(res => {
          if (res.success) {
            this.dialogFormVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            })

            this.getClassActivityList()

          }

        })
      }
      //修改
      if (this.type === 2) {
        updateClassActivity(this.classActivityInfo).then(res => {
          if (res.success) {
            this.dialogFormVisible = false
            this.$message({
              message: '修改成功',
              type: 'success'
            })

            this.getClassActivityList()

          }

        })

      }

    },
    //获取分类列表
    getCategoryList() {
      getCategory({}, 1, 999).then(res => {
        this.categoryList = res.dataMap.list
      })

    },
    //获取课程列表
    getClassActivityList() {
      debugger
      getClassActivityList(this.classActivity, this.pageNum, this.pageSize).then(res => {
        this.classActivityList = res.dataMap
      })
      getClassActivityList(this.classActivity, 1, 999).then(res => {
        this.classActivityListPid = res.dataMap.list
      })

    },

    handleAvatarSuccess(res, file) {
      this.classActivityInfo.image = res.dataMap
      console.log(res.dataMap)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }
}
</script>
<style lang="scss" scoped>
.time_tag {
  margin: 5px 10px;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

.textarea {
  width: 600px;
}

.line {
  text-align: center;
}

.schedule-form {
  max-height: 650px;
  padding-bottom: 10px;
  overflow: auto;
}

.teacher-tag {
  margin: 2px;
}

.el-select .el-input {
  width: 130px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.app-container {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

